<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="processedData" :scale="scale" :padding="padding">
      <v-tooltip :crosshairs="{type: 'xy'}">
        <template slot="itemContent" slot-scope="params">
          <tr>
            <td style="padding: 0 10px; color: #666;">{{ params.seriesName }}</td>
            <td style="padding: 0 10px; font-weight: bold;">{{ formatValue(params.value, params.seriesName) }}</td>
          </tr>
        </template>
      </v-tooltip>
      <v-axis/>
      <v-legend position="top"/>
      <v-bar v-for="(item, index) in barConfig" :key="index" 
             :position="`x*${item.dataKey}`" 
             :color="item.color" 
             :name="item.name"/>
    </v-chart>
  </div>
</template>

<script>
  import { triggerWindowResizeEvent } from '@/utils/util'

  export default {
    name: 'Bar',
    props: {
      dataSource: {
        type: Array,
        required: true
      },
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      },
      // 自定义柱状图配置，支持多组数据
      barConfig: {
        type: Array,
        default: () => [
          { dataKey: 'y', name: '数值', color: '#1890ff', unit: '' }
        ]
      }
    },
    data() {
      return { padding: ['auto', 'auto', '40', '50'] }
    },
    computed: {
      scale() {
        // 为每个数据键创建scale配置
        const scales = this.barConfig.map(item => ({
          dataKey: item.dataKey,
          alias: item.name + (item.unit ? `(${item.unit})` : '')
        }));
        // 添加x轴配置
        scales.push({
          dataKey: 'x',
          alias: '订单编号'
        });
        return scales;
      },
      // 处理数据，确保数据格式正确
      processedData() {
        return this.dataSource || [];
      }
    },
    methods: {
      triggerWindowResizeEvent() {
        setTimeout(() => {
          window.dispatchEvent(new Event('resize'));
        }, 100);
      },
      // 根据数据系列名称格式化显示值
      formatValue(value, seriesName) {
        // 查找对应的配置项
        const config = this.barConfig.find(item => item.name === seriesName);
        // 如果有单位，则添加单位
        if (config && config.unit) {
          // 如果是金额类型，添加货币符号
          if (config.unit === '元') {
            return `¥${value.toFixed(2)}`;
          }
          return `${value}${config.unit}`;
        }
        // 默认返回格式化的数值
        return value.toFixed(2);
      }
    },
    mounted() {
      this.triggerWindowResizeEvent()
    }
  }
</script>